<template>
  <div style="display: inline-block;">
    <el-dialog
      :visible.sync="dialog"
      :close-on-click-modal="false"
      :title="title"
      append-to-body
      width="30%"
      style="text-align: center;"
      @close="cancel"
    >
      <wxlogin
        :id="from.id"
        :appid="from.appid"
        :scope="from.scope"
        :redirect_uri="from.redirect_uri"
        :state="from.state"
        :href="href"
        style="height:300px"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="cancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import wxlogin from 'vue-wxlogin'
export default {
  components: {
    wxlogin
  },
  props: {
    from: {
      required: true,
      type: Object
    }
  },
  data() {
    return {
      dialog: false,
      title: '绑定微信',
      codeUrl: require('@/assets/login/code.jpg'),
      // 二维码风格
      href:
        'data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDI3MHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7d2lkdGg6IDI3MHB4O30NCi5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0NCi5pbXBvd2VyQm94IC5zdGF0dXMge3RleHQtYWxpZ246IGNlbnRlcjt9IA=='
    }
  },
  methods: {
    cancel() {
      this.resetForm()
    },
    resetForm() {
      this.dialog = false
    }
  }
}
</script>

<style scoped>
</style>
